<template>
  <div>
    <p>$attrs:{{ $attrs['two'] }}</p>
    <hr>
    <!-- https://blog.csdn.net/qq_35176916/article/details/87921097 -->
    <!-- 子组件中通过v-bind='$attrs'接受数据，通过$listeners接收事件 -->
    <child2 v-bind="$attrs" v-on="$listeners"/>
  </div>
</template>
<script>
import child2 from './child2.vue'
export default {
  // props: ['one', 'two'], // 可写可不写
  data () {
    return {
    }
  },
  // 另：inheritAttrs的作用:
  // 先注意一点：使用$attrs时inhertAttrs设置为false.
  // 当inheritAttrs设置为true时，父元素动态绑定组件的数据，子组件如果没有通过props接收的话，该属性就会附加于子组件的根元素上。
  // 所以呢我们通过v-bind="$attrs"来指定父组件数据的绑定位置，同时设置inheritAttrs为false来取消默认行为
  inheritAttrs: false, // 父组件传递动态数据后，子组件的默认行为
  components: {
    child2
  },
  mounted () {
    // console.log(this.$attrs)
    // console.log(this.$props)
    // this.$emit('test1') // 触发父组件方法的一种方式
    // this.$listeners.test2(123) // 触发父组件方法的另一种方式
  }
}
</script>
